<template>
	<view class="bg-white item d-flex flex-column  position-relative mb-2 transition" @tap="itemTap()">
		<view class="font-weight line-clamp2" style="width:440rpx">
			{{item.activityTitle}}
		</view>
		<view class="mt-5 font">
			地点：{{item.activityAddress || '暂无'}}
		</view>
		<view class="font text-muted mt-2 line-h-md introduce transition" :class="{'open':item.flag}">介绍：{{item.activityInfo}}</view>
		
		
		<view class="position-absolute right-0 top-0 bR50" :class="item.delFlag?'bg-warning':'bg'" style="width: 200rpx;height: 160rpx;">
			<view class="text-white active_flag_txt font-weight">{{item.activityTime | dateFormat('/','xx-xx')}} {{activeState(item.delFlag)}} </view>
		</view>
	</view>
</template>

<script>
	import { dateFormat } from '@/filter/index.js'
	export default {
		filters:{dateFormat},
		props: {
			item: {
				type: Object,
				default: ()=>{}
			},
			index:{
				type:Number,
				default:()=>0
			}
		},
		data(){
			return{
			}
		},
		computed: {
			activeState() {
				return function(flag){
					if(!flag) return '已结束'
					return '进行中'
				}
			},
		},
		methods:{
			itemTap(){
				this.$emit('callBack',{
					function:'flagChange',
					data:this.index
				})
			}
		}
	}
</script>

<style scoped>
	.item{
		width: 100%;
		height: auto;
		padding: 28rpx;
		border-radius: 6rpx;
		box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.1);
		line-height: 1;
		font-size: 28rpx;
		overflow: hidden;
	}
	
	.bR50{
		border-bottom-left-radius: 50%;
		transform: translateY(-50%);
	}
	
	.active_flag_txt{
		position: absolute;
		top: 54%;
		left: 55%;
		transform: translate(-50%,50%);
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		
	}
	
	
	.bg{
		background-color: #999999;
	}
	
	.introduce{
		width: 100%;
		height: 32rpx;
		overflow: hidden;
		transition: all .3s ease-in;
	}
	
	
	.open{
		height: auto;
	}
</style>
